<template>
  <MainFrame>
    <div slot='content'>
      <div class="top-title">
        台区列表
      </div>
      <div class="page">
        <el-form :inline="true" :model="area" class="demo-form-inline">
          <el-form-item label="归属地">
            <el-input v-model="area.location" placeholder="请输入归属地"></el-input>
          </el-form-item>
          <el-form-item label="台区号">
            <el-input v-model="area.areaNo" placeholder="请输入台区号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitQuery">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="top" style="margin-bottom: 10px">
          <el-button type="primary" @click="add" icon="el-icon-plus" v-if="userRole==0">添加台区</el-button>
          <el-row type="flex">
            <el-col :span="3">台区总数：{{ totalArea }}</el-col>
            <el-col :span="3">在线台区数：{{ onlineCount }}</el-col>
            <el-col :span="3">
              <el-checkbox v-model="online" @change="changeOnline">显示在线台区</el-checkbox>
            </el-col>
          </el-row>
        </div>
        <el-table :data="items" border style="width: 100%" stripe :row-class-name="checkStatus">
          <!-- <el-table-column prop="id" label="id" width="50">
          </el-table-column> -->
          <el-table-column prop="location" label="归属地" width="70">
            <template slot-scope="scope">
              <a @click="edit(scope.row)">{{ scope.row.location }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="areaNo" label="台区号" width="80">
            <template slot-scope="scope">
              <a @click="edit(scope.row)">{{ scope.row.areaNo }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="台区地点" width="400">
            <template slot-scope="scope">
              <a @click="edit(scope.row)">{{ scope.row.address }}</a>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="480">
            <template slot-scope="scope">
              <el-button size="mini" round @click="statistic(scope.row)">电流趋势</el-button>
              <el-button size="mini" round @click="changeRecord(scope.row)">换相记录</el-button>
              <el-button size="mini" round @click="realtimeData(scope.row)" :disabled="scope.row.status!=1">实时数据</el-button>
              <el-button size="mini" round @click="machineData(scope.row)" :disabled="scope.row.status!=1">换相器</el-button>
              <el-button size="mini" round @click="onClickCmd(scope.row)" v-if="userRole!=2" :disabled="scope.row.status!=1">发送指令</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0;">
          <el-pagination layout="prev, pager, next" :total="totalArea" :page-size="pageSize" :current-page.sync="currentPage" :page-count="totalPage" @current-change="pageChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </MainFrame>
</template>
<script>
import MainFrame from '@/components/MainFrame';
import utils from '../ttJs/utils.js'
import { validateData } from '../ttJs/utils.js'
export default {
  components: {
    MainFrame,
  },
  data() {
    return {
      area: {
        location: '',
        areaNo: ''
      },
      items: [],
      date: new Date,
      isEditable: false,
      online: false,
      userRole: null,
      totalArea: 0,
      onlineCount: 0,
      currentPage: 0,
      pageSize: 0,
      totalPage: 0
    };
  },
  mounted: function() {
    this.userRole = sessionStorage.getItem("role");
    if (utils.validateData(sessionStorage.getItem("location"))) {
      this.area.location = sessionStorage.getItem("location");
    }
    if (utils.validateData(sessionStorage.getItem("areaNo"))) {
      this.area.areaNo = sessionStorage.getItem("areaNo");
    }
    if (sessionStorage.getItem("areaPage") != 'undefined') {
      this.currentPage = Number(sessionStorage.getItem("areaPage"));
    }
    if (utils.validateData(sessionStorage.getItem("online")) && sessionStorage.getItem("online") != 'undefined'
        && sessionStorage.getItem("online") != 'false') {
      this.online = true;
      sessionStorage.setItem("online", '');
    }
    this.getItems();
  },
  beforeDestroy: function() {
    //alert("before destroy")
    sessionStorage.setItem("areaPage", this.currentPage);
    sessionStorage.setItem("online", this.online);
  },
  methods: {
    onSubmitQuery() {
      sessionStorage.setItem("location", this.area.location);
      sessionStorage.setItem("areaNo", this.area.areaNo);
      this.getItems();
    },
    getItems() {
      var self = this;
      var url = '/yitai/admin/area';
      var params = {
        location: this.area.location,
        areaNo: this.area.areaNo,
        sortByOnline: this.online,
        page: this.currentPage
      };
      var success = function(response) {
        self.items = response.info;
        self.currentPage = response.page;
        self.pageSize = response.size;
        self.totalPage = response.total;
        //sessionStorage.setItem("areaPage", response.page);
        self.countArea();
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    add() {
      this.$router.push({ name: 'TaiquInfo' })
    },
    machineData(item) {
      this.$router.push({ name: 'MachineData', query: { id: item.id } })
    },
    realtimeData(item) {
      this.$router.push({ name: 'TaiquData', query: { id: item.id } })
    },
    statistic(item) {
      this.$router.push({ name: 'Statistics', query: { id: item.id } })
    },
    edit(item) {
      this.$router.push({ name: 'TaiquDetail', query: { id: item.id } })
    },
    changeRecord(item) {
      this.$router.push({ name: 'TaiquChangeRecord', query: { id: item.id } })
    },
    del(item) {
      var self = this;
      var event = function() {
        var params = { id: item.id }
        var url = '/yitai/admin/deleteArea';
        var success = function(response) {
          self.getItems()
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
      utils.del(event)
    },
    onClickCmd(item) {
      var self = this
      this.$prompt('请输入指令', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        // this.$message({
        //   type: 'success',
        //   message: '你的邮箱是: ' + value
        // });
        var params = { id: item.id, cmd: value }
        var url = '/yitai/admin/semdCommend';
        var success = function(response) {
          // self.getItems()
          var status = response.status
          if (status == 200) {
            self.$notify({
              title: '成功',
              message: '发送成功',
              type: 'success'
            });
          } else {
            self.$notify({
              title: '失败',
              message: '发送失败',
              type: 'error'
            });
          }
        }
        var fail = function() {
          utils.fail('发送失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }).catch(() => {

      });
    },
    checkStatus({ row, rowIndex }) {
      if (row.status == 0) {
        return 'unactived';
      }
    },
    changeOnline() {
      this.getItems();
    },
    countArea() {
      var self = this;
      var url = '/yitai/admin/countArea';
      var params = {
        location: this.area.location,
        areaNo: this.area.areaNo,
        sortByOnline: this.online,
        page: this.currentPage
      };
      var success = function(response) {
        self.totalArea = response.totalArea;
        self.onlineCount = response.onlineCount;
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    pageChange(pageNum) {
      this.currentPage = pageNum;
      this.getItems();
    },
    resetQuery() {
      this.area.location = '';
      this.area.areaNo = '';
      sessionStorage.setItem("location", '');
      sessionStorage.setItem("areaNo", '');
      this.getItems();
    }
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  font-size: 18px;
  font-weight: bold;
  padding: 0 20px;
}

.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.unactived a,
.unactived a:visited,
.unactived a:hover,
.unactived a:active {
  color: red !important;
}

</style>
